<template>
  <div ref="vantaRef" style="width: 100%; height: 100vh" class="index">
    <el-container>
      <el-header height="65px">
        <!-- 头部组件 -->
        <Top></Top>
      </el-header>
      <el-container>
        <!-- 导航组件 -->
        <Sidebar></Sidebar>
        <el-container>
          <el-main>
            <!-- 路由出口 -->
            <router-view />
          </el-main>
          <el-footer height="46px">
            <!-- 尾部组件 -->
            <Bottom></Bottom>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>
<script>
//引入导航组件
import Sidebar from "@/components/Side/Sidebar.vue";
// 引入头部组件
import Top from "@/components/Top/Top.vue";
// 引入尾部组件
import Bottom from "@/components/Bottom/Bottom.vue";

import * as THREE from "three";
import Rings from "vanta/src/vanta.halo";

export default {
  components: {
    //注册组件
    Sidebar,
    Top,
    Bottom,
  },
  data() {
    return {
      Isidentity: "0",
    };
  },
  created() {
    this.Isidentity = window.sessionStorage.getItem("identity");
    console.log(this.Isidentity);
  },
  mounted() {
    this.vantaEffect = Rings({
      el: this.$refs.vantaRef,
      THREE: THREE,
    });
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy();
    }
  },
};
</script>
<style lang="less">
.index {
  margin: 0;
  padding: 0;
  height: 100%;

  .el-container {
    height: 100%;
    .el-header {
      line-height: 70px;
      padding: 0;
      background-color: #242f4280;
      color: #ffffff;
    }
    .el-container {
      .el-footer {
        line-height: 45px;
      }
    }
  }
}
</style>
